<template>
  <div v-loading="loading" style="min-width: 900px; height: 100%;" class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('出资穿透') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('穿透方向')" prop="penetration">
        <dict-select
          v-model="queryParams.penetration"
          dictionary="penetration"
          :placeholder="$t('穿透方向')"
          @change="clearData"
        />
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'X'" :label="$t('主体类型')" prop="investorType">
        <el-select v-model="queryParams.investorType" :clearable="true" filterable :placeholder="$t('请选择主体')">
          <el-option
            v-for="item in dealTypeOptions"
            :key="item.id"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'X'" :label="$t('主体名称')" prop="investorId">
        <MainBodySelect
          v-model="queryParams.investorId"
          :parameters="queryParams.investorType"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'X'" :label="$t('底层项目')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('底层项目')"
          clearable
        />
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'S'" :label="$t('查询维度')" prop="businessType">
        <el-select
          v-model="queryParams.businessType"
          :placeholder="$t('请选择')"
          filterable
          clearable
          @change="clearDataBussiness"
        >
          <el-option :label="$t('项目')" :value="'deal'" />
          <el-option :label="$t('标的公司')" :value="'company'" />
          <el-option :label="$t('间接项目')" :value="'indirect'" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'S' && queryParams.businessType === 'deal'" :label="$t('项目名称')" prop="businessList">
        <el-select
          v-model="queryParams.businessList"
          :placeholder="$t('请选择')"
          size="medium"
          multiple
          collapse-tags
          filterable
          clearable
        >
          <el-option
            v-for="dict in dataList"
            :key="dict.id"
            :label="$t(dict.dealName)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'S' && queryParams.businessType === 'indirect'" :label="$t('间接项目')" prop="businessList">
        <el-select
          v-model="queryParams.businessList"
          :placeholder="$t('请选择')"
          size="medium"
          multiple
          collapse-tags
          filterable
          clearable
        >
          <el-option
            v-for="dict in bfInvestGroupList"
            :key="dict.indirectDealId"
            :label="$t(dict.company.companyName)"
            :value="dict.indirectDealId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="queryParams.penetration === 'S' && queryParams.businessType === 'company'" :label="$t('标的公司')" prop="businessList">
        <el-select
          v-model="queryParams.businessList"
          :placeholder="$t('请选择')"
          multiple
          collapse-tags
          filterable
          clearable
        >
          <el-option
            v-for="dict in companyPortalFileOption"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button icon="el-icon-download" size="mini" @click="exportHandle">{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="tabs">
      <el-tab-pane :label="$t('树形结构')" name="0" />
      <el-tab-pane :label="$t('列表展示')" name="1" />
      <el-tab-pane v-if="queryParams.penetration === 'S'" :label="$t('持股情况')" name="2" />
      <el-tab-pane v-if="queryParams.penetration === 'X'" :label="$t('图表展示')" name="3" />
    </el-tabs>
    <div class="main-area">
      <div v-show="tabs === '2'">
        <div class="legend">
          <span v-for="v in typeList" :key="v.type" class="tab-flex tags">
            <i :style="'background: ' + v.color" />
            <span>{{ v.name }}</span>
          </span>
        </div>
        <el-table v-loading="loading" :data="chartsDataTotalTable" :row-class-name="tableRowClassName" border height="calc(100vh - 320px)">
          <el-table-column :label="$t('类型')" prop="type" align="center" show-overflow-tooltip width="200" />
          <el-table-column :label="$t('名称')" prop="name" align="left" show-overflow-tooltip width="300">
            <template slot-scope="scope">
              <div class="tab-flex tags">
                <i :style="'background: ' + scope.row.color" />
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('穿透持股合计')" prop="totalPenetration" align="center" show-overflow-tooltip width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hierarchy !== '0'" class="money-text">{{ scope.row.totalPenetration !==null ? keepNumber(scope.row.totalPenetration, 'y') + '%' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('总投资金额(万)')" prop="totalPenetration" align="center" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.hierarchy !== '0'" class="money-text">{{ scope.row.totalPenetrationMoney !==null ? moneyFormat(scope.row.totalPenetrationMoney) : '' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="tabs === '1'">
        <div class="legend">
          <span v-for="v in typeList" :key="v.type" class="tab-flex tags">
            <i :style="'background: ' + v.color" />
            <span>{{ v.name }}</span>
          </span>
        </div>
        <el-table v-loading="loading" :data="chartsDataTable" :row-class-name="tableRowClassName" border height="calc(100vh - 320px)">
          <el-table-column v-if="queryParams.penetration === 'X'" :label="$t('层级')" prop="hierarchy" align="center" show-overflow-tooltip width="80">
            <template slot-scope="scope">
              <span>第{{ scope.row.hierarchy }}层</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('类型')" prop="type" align="center" show-overflow-tooltip width="100" />
          <el-table-column :label="$t('名称')" prop="name" align="left" show-overflow-tooltip width="250">
            <template slot-scope="scope">
              <div class="tab-flex tags">
                <i v-if="scope.row.name !== null" :style="'background: ' + scope.row.color" />
                <span class="link_a">
                  {{ scope.row.name }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('上层持股')" prop="levelShareholding" align="center" show-overflow-tooltip width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.hierarchy !== '0'" class="money-text">{{ scope.row.levelShareholding !==null ? keepNumber(scope.row.levelShareholding, 'y') + '%' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('穿透持股')" prop="penetration" align="center" show-overflow-tooltip width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.hierarchy !== '0'" class="money-text">{{ scope.row.penetration !==null ? keepNumber(scope.row.penetration, 'y') + '%' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('穿透持股合计')" prop="totalPenetration" align="center" show-overflow-tooltip width="130">
            <template slot-scope="scope">
              <span v-if="scope.row.hierarchy !== '0'" class="money-text">{{ scope.row.totalPenetration !==null ? keepNumber(scope.row.totalPenetration, 'y') + '%' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('投资链')" prop="investmentChain" align="left" min-width="1200">
            <template slot-scope="scope">
              <div v-if="queryParams.penetration === 'X'">
                <span
                  v-for="(item, index) in scope.row.investmentChain"
                  :key="index"
                >
                  <span v-if="index !== 0">  ->  </span>
                  <span class="investmentChain" :style="{'background':item.color}">{{ item.name }}</span>
                </span>
              </div>
              <div v-if="queryParams.penetration === 'S'">
                <span
                  v-for="(item, index) in scope.row.investmentChain"
                  :key="index"
                >
                  <span v-if="index !== 0">  ->  </span>
                  <span class="investmentChain" :style="{'background': scope.row.investmentChain[scope.row.investmentChain.length - 1- index].color}">{{ scope.row.investmentChain[scope.row.investmentChain.length - 1- index].name }}</span>
                </span>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="tabs === '0'" style="height:100%;overflow-y:auto;">
        <el-tree :data="data" default-expand-all :props="defaultProps">
          <span slot-scope="{ node,data }" class="custom-tree-node" :style="'color: ' + getType(data.typeValue)">
            <span class="tree-node" :title="node.label">
              {{ $t(data.type) }}: {{ node.label }}
            </span>
            <div v-if="data.ceng !== 0" class="tag">
              <i>|</i>
              <span>{{ $t('上层持股') }}: {{ data.levelShareholding !==null ? keepNumber(data.levelShareholding, 'y') + '%' : '' }}</span>
              <i>|</i>
              <span>{{ $t('穿透持股') }}: {{ data.penetration !==null ? keepNumber(data.penetration, 'y') + '%' : '' }}</span>
              <i>|</i>
              <span>{{ $t('穿透持股合计') }}: {{ data.totalPenetration !==null ? keepNumber(data.totalPenetration, 'y') + '%' : '' }}</span>
            </div>
          </span>
        </el-tree>
      </div>
      <force v-if="tabs === '3'" ref="force" :charts-data="chartsData" :root-id="queryParams.investorId" />
    </div>
  </div>
</template>

<script>
import MainBodySelect from '@/components/MainBodySelect/index'
import force from '@/views/chart/force.vue'
import { getProjectPenetration, showInvestorGraph } from '@/api/bf/investmentPenetration/investmentPenetration'
import { listDealTypeCompanySelect } from '@/api/company/base/companyBase'
import { findDeal } from '@/api/base/deal/dealBase'
import { listBfInvestGroupName } from '@/api/bf/investGroup/bfInvestGroup'
export default {
  components: {
    MainBodySelect,
    force
  },
  data() {
    return {
      queryParams: {
        investorType: undefined,
        investorId: undefined,
        companyId: undefined,
        through: false,
        penetration: 'X',
        businessType: undefined,
        dealId: undefined,
        businessList: [],
        businessNameList: [],
        dealname: undefined
      },
      companyPortalFileOption: [],
      bfInvestGroupList: [],
      dealTypeOptions: [],
      dataList: [],
      // 遮罩层
      loading: false,
      chartsData: undefined,
      // 表格表单数据
      chartsDataTable: [],
      // 表格表单合计数据
      chartsDataTotalTable: [],
      // 树形数据表单数据
      data: [],
      tabs: '0',

      defaultProps: {
        children: 'children',
        label: 'table'
      },
      typeList: [
        { type: 'internal', name: '内部机构', color: '#5470c6' },
        { type: 'fund', name: '基金', color: '#38ad00' },
        { type: 'equity', name: '直投项目', color: '#ffb000' },
        { type: 'bf', name: '参股基金', color: '#ee6666' },
        { type: 'indirect', name: '间接项目', color: '#409eff' },
        { type: 'spv', name: 'SPV', color: '#ea7ccc' },
        { type: 'fof', name: '母基金', color: '#83576c' },
        { type: 'manager', name: '基金管理人', color: '#9a60b4' },
        { type: 'deal', name: '项目', color: '#6666cc' },
        { type: 'bfFund', name: '子基金', color: '#c727b7' },
        { type: 'company', name: '标的公司', color: '#737373' },
        { type: 'hhqy', name: '合伙企业', color: '#999933' }
      ]
    }
  },
  created() {
    this.getDicts('deal_investment_type').then(response => {
      response.data.forEach(item => {
        if (item.dictValue !== 'hhqy') {
          this.dealTypeOptions.push({
            dictLabel: item.dictLabel,
            dictValue: item.dictValue
          })
        }
      })
    })
    listDealTypeCompanySelect({}).then(response => {
      response.rows.forEach(item => {
        this.companyPortalFileOption.push({ dictLabel: item.companyName, dictValue: item.id })
      })
    })
    listBfInvestGroupName({}).then(response => {
      this.bfInvestGroupList = response.rows
      this.total = response.total
      this.loading = false
    })
    findDeal({ dealType: '', scopeAuthority: false }).then(response => {
      this.dataList = response.data
    })
  },
  mounted() {
  },
  methods: {
    /** 搜索按钮操作 */
    queryHandle() {
      if (this.queryParams.penetration === 'X') {
        this.getData()
      } else if (this.queryParams.penetration === 'S' && this.queryParams.businessType === 'company') {
        this.getCompany()
      } else if (this.queryParams.penetration === 'S' && this.queryParams.businessType === 'deal') {
        this.getDeal()
      } else if (this.queryParams.penetration === 'S' && this.queryParams.businessType === 'indirect') {
        this.getIndirect()
      }
    },
    keepNumber(value) { // 过滤器保留4为小数
      const numM = Number(value).toFixed(5)
      if (numM === 'NaN') {
        return '0.0000'
      }
      const realVal = numM.substring(0, numM.length - 1)
      return realVal
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.chartsDataTotalTable = []
        this.chartsDataTable = []
        this.data = []
        this.chartsData = undefined
        this.resetForm('queryForm')
        this.queryHandle()
    },
    getType(type) {
      var row = this.typeList?.find(ele => ele.type === type)
      if (row) {
        return row.color
      }
    },
    tableRowClassName(data) {
      console.log(data.row, 'row')
      if (data.row.name === null || data.row.name === undefined || data.row.name === '') {
        return 'warning-row'
      }
      return ''
    },
    clearData() {
      this.chartsDataTotalTable = []
      this.chartsDataTable = []
      this.data = []
      this.queryParams.businessList = []
      this.queryParams.businessNameList = []
      this.queryParams.investorType = undefined
      this.queryParams.investorId = undefined
      this.queryParams.companyId = undefined
      this.queryParams.through = undefined
      this.queryParams.businessType = undefined
      this.queryParams.dealId = undefined
      this.queryParams.dealname = undefined
    },
    clearDataBussiness() {
      this.queryParams.businessList = []
      this.queryParams.businessNameList = []
    },
    // 初始化数据
    getData() {
      this.loading = true
      if (this.queryParams.investorId === undefined || this.queryParams.investorId === null || this.queryParams.investorId === '' || this.queryParams.investorType === undefined || this.queryParams.investorType === null || this.queryParams.investorType === '') {
        this.loading = false
        return
      }
      showInvestorGraph({ investorType: this.queryParams.investorType, investorId: this.queryParams.investorId, through: this.queryParams.through, dealName: this.queryParams.dealName }).then(response => {
        this.$nextTick(() => {
          this.chartsData = response.datas || undefined
          // 格式化表单数据
          this.chartsDataTable = this.chartsData.linksTableList || []
          this.chartsDataTable?.forEach(v => {
            var row = this.typeList?.find(ele => ele.type === v.typeValue)
            if (row) {
              v.color = row.color
            }
          })
          // 格式化树形图
          this.data = [this.chartsData.penetrationTreeVo]
          // 表格表单合计数据
          this.chartsDataTotalTable = this.chartsData.linksTableTotalList || []
          this.chartsDataTotalTable?.forEach(v => {
            var row = this.typeList?.find(ele => ele.type === v.typeValue)
            if (row) {
              v.color = row.color
            }
          })
        })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    getCompany() {
      this.queryParams.dealId = undefined
      if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
        return
      }
      var bussnamelist = []
      this.queryParams.businessList.forEach(option => {
         const find = this.companyPortalFileOption.find(obj => obj.dictValue === option)
          bussnamelist.push(find.dictLabel)
        }
      )
      this.getEchartsData('company', this.queryParams.businessList, bussnamelist)
    },
    getDeal() {
      console.log(this.queryParams.businessList, 'this.queryParams.businessList')
      if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
        return
      }
      this.getEchartsData('deal', this.queryParams.businessList)
    },
    getIndirect() {
      console.log(this.queryParams.businessList, 'this.queryParams.businessList')
      if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
        return
      }
      var bussnamelist = []
      this.queryParams.businessList.forEach(option => {
          const find = this.bfInvestGroupList.find(obj => obj.indirectDealId === option)
          bussnamelist.push(find.company.companyName)
        }
      )
      this.getEchartsData('indirect', this.queryParams.businessList, bussnamelist)
    },
    getEchartsData(type, businessList, businessNameList, businessId, businessName) {
      this.loading = true
      getProjectPenetration({ businessType: type, businessList: businessList, businessNameList: businessNameList, businessId: businessId, businessName: businessName }).then(response => {
        this.loading = false
        // 格式化表单数据
        this.chartsDataTable = response.data.linksTableList || []
        this.chartsDataTable?.forEach(v => {
          var row = this.typeList?.find(ele => ele.type === v.typeValue)
          if (row) {
            v.color = row.color
          }
        })
        // 格式化树形图
        this.data = response.data.penetrationTreeVoList
        // 表格表单合计数据
        this.chartsDataTotalTable = response.data.linksTableTotalList || []
        this.chartsDataTotalTable?.forEach(v => {
          var row = this.typeList?.find(ele => ele.type === v.typeValue)
          if (row) {
            v.color = row.color
          }
        })
        console.log(response.data)
      }).catch(() => {
        this.loading = false
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        if (this.queryParams.penetration === 'S') {
          var bussnamelist = []
          if (this.queryParams.businessType === 'company') {
            this.queryParams.dealId = undefined
            if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
              return
            }
            this.queryParams.businessList.forEach(option => {
                const find = this.companyPortalFileOption.find(obj => obj.dictValue === option)
                bussnamelist.push(find.dictLabel)
              }
            )
            this.downLoadExcelPost('/bf/investmentPenetration/exportProjectPenetration', { businessType: 'company', businessList: this.queryParams.businessList, businessNameList: bussnamelist, businessId: this.queryParams.dealId, businessName: '' })
            this.msgSuccess(this.$t('导出成功'))
          } else if (this.queryParams.businessType === 'deal') {
            this.queryParams.companyId = undefined
            if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
              return
            }
            // businessType: 'deal', businessList: this.queryParams.businessList, businessNameList: this.queryParams.businessNameList, businessId: this.queryParams.dealId, businessName: ''
            this.downLoadExcelPost('/bf/investmentPenetration/exportProjectPenetration', this.queryParams).then(() => {
              this.msgSuccess(this.$t('导出成功'))
            })
          } else {
            this.queryParams.dealId = undefined
            if (this.queryParams.businessList === undefined || this.queryParams.businessList === null) {
              return
            }
            this.queryParams.businessList.forEach(option => {
                const find = this.bfInvestGroupList.find(obj => obj.indirectDealId === option)
                bussnamelist.push(find.company.companyName)
              }
            )
            this.downLoadExcelPost('/bf/investmentPenetration/exportProjectPenetration', { businessType: 'indirect', businessList: this.queryParams.businessList, businessNameList: bussnamelist, businessId: this.queryParams.dealId, businessName: '' })
            this.msgSuccess(this.$t('导出成功'))
          }
        } else {
          if (this.queryParams.investorId === undefined || this.queryParams.investorId === null || this.queryParams.investorId === '' || this.queryParams.investorType === undefined || this.queryParams.investorType === null || this.queryParams.investorType === '') {
            this.loading = false
            return
          }
          this.downLoadExcel('/bf/investmentPenetration/exportInvestorPenetration/', { investorType: this.queryParams.investorType, investorId: this.queryParams.investorId, through: this.queryParams.through, dealName: this.queryParams.dealName })
        }
      }).then(response => {
        this.download(response.msg)
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.list-table{
  height: 100%;
  width: 100%;
  overflow: hidden;
  .main-area{
    height: calc(100% - 147px);
    width: 100%;
    overflow: hidden;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  span{
    padding: 0 5px;
    width: 180px;
    overflow: hidden;
    font-size: 13px;
    display: inline-block;
    font-weight: bold;
    text-overflow: ellipsis;
    &:last-child{
      width: unset;
    }
  }
}
.tags{
  i{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
  }
}
.tab-flex{
  display: flex;
  align-items: center;
  column-gap: 4px;
  span{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.legend{
  text-align: center;
  margin-bottom: 5px;
  font-size: 13px;
  .tags{
    display: inline-flex;
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
  i{
    width: 10px;
    height: 10px;
  }
}
.investmentChain{
  color: #fff;
  font-size: 11px;
  padding: 4px;
  border-radius: 5px;
}
/deep/.el-tree-node__content{
  height: 30px;
  .custom-tree-node{
    background: transparent!important;
    display: flex;
    align-items: center;
    .tag{
      i{
        font-style: normal;
        margin: 0 5px;
        color: #c4c4c4;
      }
    }
  }
  .tree-node{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    display: inline-block;
    font-weight: bold;
  }

}
/deep/.c-node-text{
  font-size: 12px;
  span{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 8px; /*滚动条宽度*/
//   height: 15px; /*滚动条高度*/
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
//   border-radius: 0px; /*滚动条的背景区域的圆角*/
//   background-color: rgba(2, 29, 87, 1); /*滚动条的背景颜色*/
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
//   background-color: rgba(2, 29, 87, 1);
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 10px; /*滚动条的圆角*/
//   background-color: rgba(24, 144, 255, 0.3); /*滚动条的背景颜色*/
// }
</style>
